<template>
  <div class="md:flex">
    <template v-for="(item, index) in dataList" :key="item.title">
      <ChartCard
        :loading="loading"
        :title="item.title"
        :total="getTotal(item.total, index)"
        class="md:w-1/4 w-full !md:mt-0 !mt-4"
        :class="[index + 1 < 4 && '!md:mr-4']"
      >
        <template #action>
          <a-tooltip title="指标说明">
            <Icon :icon="item.icon" :size="20" />
          </a-tooltip>
        </template>
        <div v-if="type === 'chart'">
          <Trend term="周同比" :percentage="12" v-if="index === 0" />
          <Trend term="日同比" :percentage="11" v-if="index === 0" :type="false" />

          <Line v-if="index === 1" :option="option" :chartData="chartData" height="50px"></Line>

          <Bar v-if="index === 2" :option="option" :chartData="chartData" height="50px"></Bar>

          <Progress v-if="index === 3" :percent="78" :show-info="false"></Progress>
        </div>
        <div v-else>
          <Line v-if="index === 0" :option="option" :chartData="chartData1" height="50px"></Line>

          <Line v-if="index === 1" :option="option" :chartData="chartData2" height="50px"></Line>

          <Bar v-if="index === 2" :option="option" :chartData="chartData3" height="50px"></Bar>

          <Bar v-if="index === 3" :option="option" :chartData="chartData4" height="50px"></Bar>
        </div>
        <template #footer v-if="type === 'chart'">
          <span v-if="inde !== 3"
            >{{ item.footer }}<span>{{ item.value }}</span></span
          >
          <Trend term="周同比" :percentage="12" v-if="index === 3" />
          <Trend term="日同比" :percentage="11" v-if="index === 3" :type="false" />
        </template>
        <template #footer v-else>
          <span
            >{{ item.footer }}<span>{{ item.value }}</span></span
          >
        </template>
      </ChartCard>
    </template>
  </div>
</template>
<script lang="ts" setup>
  import { ref, computed, reactive } from 'vue';
  import { Icon } from '/@/components/Icon';
  import { Progress } from 'ant-design-vue';
  import ChartCard from '/@/components/chart/ChartCard.vue';
  import Trend from '/@/components/chart/Trend.vue';
  import Bar from '/@/components/chart/Bar.vue';
  import Line from '/@/components/chart/Line.vue';
  //import { chartCardList, bdcCardList } from '../data';
  import {defHttp} from "/@/utils/http/axios";
  import {GrowCardItem} from "/@/views/dashboard/Analysis/data";

  const props = defineProps({
    loading: {
      type: Boolean,
    },
    type: {
      type: String,
      default: 'chart',
    },
  });
  //const option = ref({ xAxis: { show: false, boundaryGap: false }, yAxis: { show: false, boundaryGap: false, max: 220 } });
  const option=ref({ xAxis: { show: false, boundaryGap: false }, yAxis: { show: false, boundaryGap: false }});

  let params={};
  const chartData1 = ref([]);
  const res = defHttp.get({url:"/assets.dashboard/analyse/index1",params});
  res.then((data)=>{
    chartData1.value=data.list;
    dataList.value[0].total = data.sum;
    dataList.value[0].value = data.average;
    console.log(chartData1)
  });
  const chartData2= ref([]);
  const chartData3= ref([]);
  const chartData4= ref([]);

  const res2 =  defHttp.get({url:"/assets.dashboard/analyse/index2",params});
  res2.then((data)=>{
    chartData2.value=data.list;
    dataList.value[1].total = data.sum;
    dataList.value[1].value = data.average;
  });
  const res3 =  defHttp.get({url:"/assets.dashboard/analyse/index3",params});
  res3.then((data)=>{
    chartData3.value=data.list;
    dataList.value[2].total = data.sum;
    dataList.value[2].value = data.average;
  });
  const res4 =  defHttp.get({url:"/assets.dashboard/analyse/index4",params});
  res4.then((data)=>{
    chartData4.value=data.list;
    dataList.value[3].total = data.sum;
    dataList.value[3].value = data.average;
  });

//月收款   收款笔数 月欠款 安生生产月巡检数
  const dataList: GrowCardItem[] = ref([
    {
      title: '近六个月收款',
     // icon: 'visit-count|svg',
      total: 126560,
      value: 234.56,
      footer: '月均',
    },
    {
      title: '近六个月收款笔数',
     // icon: 'total-sales|svg',
      value: 1234,
      total: 8846,
      color: 'blue',
      footer: '月均',
    },
    {
      title: '近六个月欠款',
     // icon: 'download-count|svg',
      value: 60,
      total: 6560,
      color: 'orange',
      footer: '月均',
    },
    {
      title: '近六个月安生生产月巡检数',
     // icon: 'transaction|svg',
      total: 78,
      footer: '月均',
    },
  ]);


  function getTotal(total, index) {
    return total;
  }
</script>
